آموزش Vue.js 2 Academy: گام به گام Vue را یاد بگیرید [ویدئو]

سرفصل ها و درس ها

مقدمه و شروع Introduction & Getting Started

• خوش آمدی Welcome

• خوش آمدی Welcome

• Vue چیست و چرا باید آن را یاد بگیرم؟ What is Vue & why should I learn it?

• Vue چیست و چرا باید آن را یاد بگیرم؟ What is Vue & why should I learn it?

• نصب ویژوال استودیو Visual Studio installation

• نصب ویژوال استودیو Visual Studio installation

مبانی Vue: برنامه لیست مهمان Vue Basics: Guest List App

مبانی Vue: برنامه لیست مهمان Vue Basics: Guest List App

• معرفی بخش Section intro

• معرفی بخش Section intro

• دانلود شروع پروژه Download project starter

• دانلود شروع پروژه Download project starter

• در حال نصب Vue.js Installing Vue.js

• در حال نصب Vue.js Installing Vue.js

• نمونه Vue و شی داده The Vue instance & the data object

• نمونه Vue و شی داده The Vue instance & the data object

• الگوها و DOM مجازی Templates & the virtual DOM

• الگوها و DOM مجازی Templates & the virtual DOM

• اتصال داده دو طرفه با مدل v Two-way data binding with v-model

• اتصال داده دو طرفه با مدل v Two-way data binding with v-model

• مدیریت رویداد و روش ها Event handling & methods

• مدیریت رویداد و روش ها Event handling & methods

• ارائه فهرست List rendering

• ارائه فهرست List rendering

• رندر مشروط در Vue Conditional rendering in Vue

• رندر مشروط در Vue Conditional rendering in Vue

• اتصال صفات به عناصر Binding attributes to elements

• اتصال صفات به عناصر Binding attributes to elements

• سبک های صحافی Binding styles

• سبک های صحافی Binding styles

• نحو مختصر Vue Vue shorthand syntax

• نحو مختصر Vue Vue shorthand syntax

• خروجی متن و HTML Outputting text & HTML

• خروجی متن و HTML Outputting text & HTML

• V-if در مقابل v-show V-if vs v-show

• V-if در مقابل v-show V-if vs v-show

• استفاده از عبارات جاوا اسکریپت Using JavaScript expressions

• استفاده از عبارات جاوا اسکریپت Using JavaScript expressions

• بخش بیرونی Section outro

• بخش بیرونی Section outro

نگاهی عمیق تر به Vue: برنامه لیست مهمان A deeper look at Vue: Guest list app

نگاهی عمیق تر به Vue: برنامه لیست مهمان A deeper look at Vue: Guest list app

• معرفی بخش Section intro

• معرفی بخش Section intro

• افزودن نوار پیشرفت Adding a progress bar

• افزودن نوار پیشرفت Adding a progress bar

• خواص محاسبه شده Computed properties

• خواص محاسبه شده Computed properties

• ناظران Watchers

• ناظران Watchers

• رویدادهای کلیدی و اصلاح کننده ها Key events and modifiers

• رویدادهای کلیدی و اصلاح کننده ها Key events and modifiers

• فیلترها Filters

• فیلترها Filters

• اطلاعات بیشتر در مورد حلقه زدن: کلیدها و اعداد فهرست More on looping: keys & index numbers

• اطلاعات بیشتر در مورد حلقه زدن: کلیدها و اعداد فهرست More on looping: keys & index numbers

• استفاده از چندین نمونه Vue Using multiple Vue instances

• استفاده از چندین نمونه Vue Using multiple Vue instances

• حلقه زدن با اشیا Looping with objects

• حلقه زدن با اشیا Looping with objects

• افزودن پیوندها و کلیدهای پیمایش ما Adding our navigation links & keys

• افزودن پیوندها و کلیدهای پیمایش ما Adding our navigation links & keys

• دسترسی خارجی به نمونه های Vue Accessing Vue instances externally

• دسترسی خارجی به نمونه های Vue Accessing Vue instances externally

• ویژگی‌ها و روش‌های نمونه Vue Vue instance properties & methods

• ویژگی‌ها و روش‌های نمونه Vue Vue instance properties & methods

• ارجاع عناصر با رفر Referencing elements with ref

• ارجاع عناصر با رفر Referencing elements with ref

• استفاده از قالب های رشته ای Using string templates

• استفاده از قالب های رشته ای Using string templates

• چرخه حیات Vue The Vue lifecycle

• چرخه حیات Vue The Vue lifecycle

• قلاب چرخه حیات Vue در عمل Vue lifecycle hooks in action

• قلاب چرخه حیات Vue در عمل Vue lifecycle hooks in action

• بخش بیرونی Section outro

• بخش بیرونی Section outro

ابزارهای ساخت و گردش کار: برنامه کارت های خلاقانه Build Tools & Workflow: Creative Cards App

ابزارهای ساخت و گردش کار: برنامه کارت های خلاقانه Build Tools & Workflow: Creative Cards App

• معرفی بخش Section intro

• معرفی بخش Section intro

• نصب Node & NPM Installing Node & NPM

• نصب Node & NPM Installing Node & NPM

• پروژه های داربست با Vue-cli Scaffolding projects with the Vue-cli

• پروژه های داربست با Vue-cli Scaffolding projects with the Vue-cli

• کاوش طرح و ابزارهای ساخت پروژه ما Exploring our project layout & build tools

• کاوش طرح و ابزارهای ساخت پروژه ما Exploring our project layout & build tools

• استفاده از شی داده با الگوهای تک فایل Using the data object with single file templates

• استفاده از شی داده با الگوهای تک فایل Using the data object with single file templates

• بخش بیرونی Section outro

• بخش بیرونی Section outro

مقدمه ای بر کامپوننت ها: اپلیکیشن Creative Cards Introduction to Components: Creative Cards App

مقدمه ای بر کامپوننت ها: اپلیکیشن Creative Cards Introduction to Components: Creative Cards App

• معرفی بخش Section intro

• معرفی بخش Section intro

• اجزا چیست؟ What are components?

• اجزا چیست؟ What are components?

• ثبت اجزای جهانی Registering global components

• ثبت اجزای جهانی Registering global components

• ثبت اجزای محلی Registering local components

• ثبت اجزای محلی Registering local components

• ایجاد اجزای تک فایل Creating single file components

• ایجاد اجزای تک فایل Creating single file components

• افزودن جزء جلوی کارت Adding the card front component

• افزودن جزء جلوی کارت Adding the card front component

• داده ها را به اجزای والد ارسال کنید Emit data to parent components

• داده ها را به اجزای والد ارسال کنید Emit data to parent components

• اجزای دینامیک Dynamic components

• اجزای دینامیک Dynamic components

• ایجاد اجزای کارت اضافی Creating the additional card components

• ایجاد اجزای کارت اضافی Creating the additional card components

• ایجاد جزء ورودی متن Creating the text input component

• ایجاد جزء ورودی متن Creating the text input component

• دریافت اطلاعات از ورودی متن Receiving data from the text input

• دریافت اطلاعات از ورودی متن Receiving data from the text input

• ایجاد جزء خروجی متن Creating the text output component

• ایجاد جزء خروجی متن Creating the text output component

• انتقال داده ها با لوازم جانبی Passing data with props

• انتقال داده ها با لوازم جانبی Passing data with props

• زنده نگه داشتن اجزا Keeping components alive

• زنده نگه داشتن اجزا Keeping components alive

• محدوده بندی سبک های CSS Scoping CSS styles

• محدوده بندی سبک های CSS Scoping CSS styles

• اعتبار سنجی پایه Prop validation

• اعتبار سنجی پایه Prop validation

• ارسال داده های prop به یک شیء سبک Passing prop data to a style object

• ارسال داده های prop به یک شیء سبک Passing prop data to a style object

• مقدمه ای بر اسلات ها Introduction to slots

• مقدمه ای بر اسلات ها Introduction to slots

• دامنه اسلات و محتوای بازگشتی Slot scope & fallback content

• دامنه اسلات و محتوای بازگشتی Slot scope & fallback content

• اسلات های نام گذاری شده Named slots

• اسلات های نام گذاری شده Named slots

• بخش بیرونی Section outro

• بخش بیرونی Section outro

Components Continued & Firebase Storage: Creative Cards App Components Continued & Firebase Storage: Creative Cards App

Components Continued & Firebase Storage: Creative Cards App Components Continued & Firebase Storage: Creative Cards App

• معرفی بخش Section intro

• معرفی بخش Section intro

• راه اندازی Firebase Setting up Firebase

• راه اندازی Firebase Setting up Firebase

• ایجاد کامپوننت Image Upload Creating the Image Upload component

• ایجاد کامپوننت Image Upload Creating the Image Upload component

• آپلود تصاویر در Firebase Uploading images to Firebase

• آپلود تصاویر در Firebase Uploading images to Firebase

• تصویر کوچک پیش نمایش تصویر Image preview thumbnail

• تصویر کوچک پیش نمایش تصویر Image preview thumbnail

• نوار پیشرفت آپلود و داده های فایل $emit Upload progress bar & $emit file data

• نوار پیشرفت آپلود و داده های فایل $emit Upload progress bar & $emit file data

• جزء خروجی تصویر Image Output component

• جزء خروجی تصویر Image Output component

• دانلود تصاویر از Firebase Downloading images from Firebase

• دانلود تصاویر از Firebase Downloading images from Firebase

• دکمه تنظیم تصویر Set image button

• دکمه تنظیم تصویر Set image button

• منوی گزینه های متن: اندازه فونت Text options menu: font sizes

• منوی گزینه های متن: اندازه فونت Text options menu: font sizes

• منوی گزینه های متن: تراز متن Text options menu: text alignment

• منوی گزینه های متن: تراز متن Text options menu: text alignment

• منوی گزینه های متن: سبک قلم و وزن Text options menu: font style & weight

• منوی گزینه های متن: سبک قلم و وزن Text options menu: font style & weight

• دکمه حذف تصویر Remove image button

• دکمه حذف تصویر Remove image button

• انتقال داده با تماس های برگشتی Passing data with callbacks

• انتقال داده با تماس های برگشتی Passing data with callbacks

• کشیدن تصاویر Making images draggable

• کشیدن تصاویر Making images draggable

• اتمام مؤلفه CardInsideLeft Finishing the CardInsideLeft component

• اتمام مؤلفه CardInsideLeft Finishing the CardInsideLeft component

• اتمام مؤلفه CardInsideRight Finishing the CardInsideRight component

• اتمام مؤلفه CardInsideRight Finishing the CardInsideRight component

• اتمام مؤلفه CardBack Finishing the CardBack component

• اتمام مؤلفه CardBack Finishing the CardBack component

• معرفی اتوبوس رویداد Introduction to the event bus

• معرفی اتوبوس رویداد Introduction to the event bus

• ارسال رویدادها به اتوبوس رویداد Sending events to the event bus

• ارسال رویدادها به اتوبوس رویداد Sending events to the event bus

• دریافت رویدادها از اتوبوس رویداد Receiving events from the event bus

• دریافت رویدادها از اتوبوس رویداد Receiving events from the event bus

• افزودن میکسین ها Adding mixins

• افزودن میکسین ها Adding mixins

• بخش بیرونی Section outro

• بخش بیرونی Section outro

انتقال و انیمیشن Transitions & Animations

انتقال و انیمیشن Transitions & Animations

• معرفی بخش Section intro

• معرفی بخش Section intro

• کلاس های انتقالی Transition classes

• کلاس های انتقالی Transition classes

• اضافه کردن انتقال CSS Adding CSS transitions

• اضافه کردن انتقال CSS Adding CSS transitions

• اضافه کردن انیمیشن های CSS Adding CSS animations

• اضافه کردن انیمیشن های CSS Adding CSS animations

• انتقال اجزا و حالت‌های انتقال Component transitions & transition modes

• انتقال اجزا و حالت‌های انتقال Component transitions & transition modes

• معرفی قلاب های جاوا اسکریپت JavaScript hooks introduction

• معرفی قلاب های جاوا اسکریپت JavaScript hooks introduction

• قلاب های جاوا اسکریپت در عمل JavaScript hooks in action

• قلاب های جاوا اسکریپت در عمل JavaScript hooks in action

• ترکیب انیمیشن ها و انتقال ها Mixing animations & transitions

• ترکیب انیمیشن ها و انتقال ها Mixing animations & transitions

• کلاس های انتقال سفارشی Custom transition classes

• کلاس های انتقال سفارشی Custom transition classes

• انتقال های رندر اولیه Initial render transitions

• انتقال های رندر اولیه Initial render transitions

• انتقال عناصر و کلیدها Element transitions & keys

• انتقال عناصر و کلیدها Element transitions & keys

• انتقال های گروهی Group transitions

• انتقال های گروهی Group transitions

• کلاس V-move و نام های انتقال پویا V-move class & dynamic transition names

• کلاس V-move و نام های انتقال پویا V-move class & dynamic transition names

• بخش بیرونی Section outro

• بخش بیرونی Section outro

متشکرم Thank You

متشکرم Thank You

• متشکرم Thank you

• متشکرم Thank you